<template>
	<div class="messageArea" ref="msgBox" @scroll="scrollAjaxMsg(false)" v-loading="loading">
		<el-empty v-if="selfMsgList.length == 0" description="暂无记录"></el-empty>
		<ul class="msgList" ref="msgHeight" v-if="selfMsgList.length > 0">
      <li class="item" v-for="(v,k) in selfMsgList" :key="k">
        <div v-if="isDev">{{v.id}}</div>
        <div class="timeShow" v-if="funTimeShow(k,'addTime')">
          <span class="time">{{ $moment(v.addTime).format('Y-M-D a h:mm') }}</span>
        </div><!-- 聊天时间，通过funTimeShow判断是否显示 -->
        <div :class="['msgBox',!v.isFromUser?'isMe':'isCus']">
          <el-image class="face" :src="v.imgUrl" fit="cover"></el-image>
          <div class="msgBody">
            <div v-show="!v.isFromUser" class="nicheng">
              {{ v.nicheng }}
            </div>
            <WxText v-if="v.type==0" :isMe="!v.isFromUser" :obj="v.msgBody"></WxText>
            <WxImage v-if="v.type==1" :isMe="!v.isFromUser" :obj="v.msgBody"></WxImage>
          </div>
        </div>
      </li>
		</ul>
	</div>
</template>

<script src="./dialogCenter.js"></script>

<style lang="less" scoped>
	@import url('../../../assets/config.less');
	@import url('../../../assets/style.less');
	.messageArea{
	  position: absolute;
	  top:0;bottom:0;left:0;right:0;
	  overflow-y: scroll;
	  overflow-x: hidden;
	}
	.msgList{
		padding: 15px;
	  .timeShow{
	    text-align: center;
	    .time {
	      display: inline-block;
	      font-size: 12px;
	      margin: 24px auto;
	      padding: 4px 8px;
	      border-radius: 4px;
	      background-color: #D9D9D9;
	    }
	  }
	  .item+.item{margin-top:unit((@defPadding),px)}
	  .msgBox{
	    @faceW:40;
	    position: relative;
	    margin:0 unit((@defPadding/2),px);
	    .face{
	      position:absolute;
	      top:0;
	      width:unit(@faceW,px);height:unit(@faceW,px);
	      border-radius: 50%;
	    }
	    &.isMe{
	      text-align: right;
	      padding-right:unit((@faceW + @defPadding),px);
	      .face{right:0;}
	    }
	    &.isCus{
	      text-align: left;
	      padding-left:unit((@faceW + @defPadding),px);
	      .face{left:0;}
	    }
			/deep/ p {
				margin: 0;
				padding: 0;
			}
	  }
		.nicheng {
			font-size: 12px;
			color: #666666;
			// margin: 0 12px;
			margin-bottom: 10px;
		}
	}
	.fixed1{
	  position: fixed;
	  left:0;bottom:0;
	  height:30vh;
	  overflow: scroll;
	  background-color:rgba(188, 234, 250, 0.3);
	}
	.fixed2{
	  position: fixed;
	  right:0;top:0;
	  height:30vh;
	  overflow: scroll;
	  background-color:rgba(188, 234, 250, 0.3);
	}
</style>
